<html>
<head>
    <title></title>

    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>

        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
        }

        .chart-outer{
            height: 300px;
            width: 100%;
            padding: 0;
        }
        .tab-title{
            margin-top: 20px;
            text-align: center;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }
        table

        {

            border-collapse: collapse;

            margin: 0 auto;

            text-align: center;

        }

        table td, table th

        {

            border: 1px solid #cad9ea;

            color: #666;

            height: 30px;

            font-size: xx-small;

        }
        table thead th

        {

            background-color: #CCE8EB;

            width: 100px;

        }

        table tr:nth-child(odd)

        {

            background: #fff;

        }

        table tr:nth-child(even)

        {

            background: #F5FAFA;

        }
    </style>
</head>
<body>
<div id="page-vue">
    <div class="page-title">能耗预测</div>
    <div class="page-main">
    <el-col :span="4">
        <dev-tree ref="devTree" v-on:click-node="onTreeNode"  :tabsign="'z'" :energy="energyType"></dev-tree>
    </el-col>
    <el-col :span="20">
        <div class="main-head">
            <el-form :inline="true">
                <el-form-item label="">
                    <el-date-picker :type="dateMod" v-model="day" value-format="yyyy-MM" placeholder="日期" style="width: 150px;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-tooltip effect="dark" content="请点击左边树中区域" v-model="tooltip" placement="right">
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="">
                    <div style="color:red;font-size:14px">用电预测是指在掌握现有用电数据的基础上，依照一定的方法和规律对未来的用电数据进行测算，以预先了解用电情况的过程与结果并为以后用电定额提供参考。</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="chart-outer" id="ChartDiv">
        </div>
        <p class="tab-title">统计</p>
        <table  class="table">
            <thead>
            <tr align="center">
                <th>
                </th>
                <th v-for="(item,index) in tabData.xdata">{{item}}</th>
            </tr>
            </thead>
            <tr align="center">
                <td>实际</td>
                <td v-for="(item,index) in tabData.rdata">{{item}}</td>
            </tr>
            <tr align="center">
                <td>预测</td>
                <td v-for="(item,index) in tabData.pdata">{{item}}</td>
            </tr>
            <tr align="center">
                <td>额度</td>
                <td v-for="(item,index) in tabData.sdata">{{item}}</td>
            </tr>
        </table>
    </el-col>
    </div>
</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-vue',
        data:{
            tabData:{
                rdata:'',
                pdata:'',
                sdata:'',
                xdata:'',
            },
            day:'',
            dataFiled:[],
            monthFiled:[{name:"1月",field:''},{name:"2月",field:''},{name:"3月",field:''},{name:"4月",field:''},{name:"5月",field:''},{name:"6月",field:''},{name:"7月",field:''},{name:"8月",field:''},{name:"9月",field:''},{name:"10月",field:''},{name:"11月",field:''},{name:"12月",field:''}],
            dateMod:'month',
            energyType:'',
            currentId:'',
            dataId:'',
            value3:true,
            tooltip:false,
        },
        methods:{
            search:function(){
              if (this.currentId!=''){
                  this.loadParam();
              }
            },
            onTreeNode:function(data){
                if (data.id.split('_')[0] =='Z'){
                    this.currentId = data.id;
                    this.dataId = data.dataId;
                    this.loadParam();
                }
            },
            loadParam:function(){
                var dArr = this.day.split('-');

                var param={
                    zoneIds:this.dataId,
                    year:dArr[0]||0,
                    month:dArr[1]||0,
                    day:dArr[2]||0,
                    zoneType:0,
                    energyType:this.energyType,
                }
                HttpUtil.get('analysis/getEnergyPrediction',param).success((res)=>{
                    var chartData={
                        rdata:[],
                        pdata:[],
                        sdata:[],
                        xdata:[]
                    }
                          var item  = res.data[0].attributes;
                          for (var i=1;i<32;i++){
                              chartData.rdata.push(item.energy['energy'+i]);
                              chartData.pdata.push(item.prediction['prediction'+i]);
                              chartData.sdata.push(item.quota['quota'+i]);
                              chartData.xdata.push(i+'日');
                          };
                          this.tabData = chartData;
                    this.getChart('ChartDiv',chartData);
                })


            },
            getChart:function (id,data) {
                let myChart = echarts.init(document.getElementById(id));
                this.ChartData={
                    color: ['#30BFCD', '#234567','#F98317'],
                    tooltip: {
                        show:true,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            magicType : {show: true, type: ['line', 'bar']},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },
                    legend: {
                        data: ['实际用量', '预测用量', '额度用量'],
                        textStyle: { //图例文字的样式
                            color: '#9AA1AA',
                            fontSize: 16
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data:data.xdata,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    series: [{
                        name: '实际用量',
                        type: 'bar',

                        data:data.rdata
                    },
                        {
                            name: '预测用量',
                            type: 'bar',

                            data: data.pdata
                        },
                        {
                            name: '额度用量',
                            type: 'bar',

                            data:data.sdata
                        },

                    ]
                };
                myChart.setOption(this.ChartData);
            },

        },
        created:function(){
            this.dateMod == "month"
            this.energyType = HttpUtil.getQueryString('energyType');
            this.dataFiled=this.monthFiled;
            this.day = TimeUtil.convertToString(new Date()).substr(0,7);

        },
        mounted:function(){
            this.tooltip = true;
        }
    });


</script>


</body>

</html>
